<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:p="http://primefaces.org/ui"
    xmlns:q="http://quickjsf.org/ui"
    xmlns:composite="http://java.sun.com/jsf/composite">
    
    <composite:interface>
    	<composite:attribute name="editable" type="boolean" default="false"/>	
    	<composite:attribute name="filterable" type="boolean" default="false"/>	
    	<composite:attribute name="headerText" type="String" default="列表信息"/>	
    	<composite:attribute name="formTitle" type="String" default="表单信息"/>	
    	<composite:attribute name="rowFieldCount" type="int" default="1"/>	
    	<composite:attribute name="columnClasses" type="String" default=""/>
    	<composite:attribute name="useTemplate" type="boolean" default="false"/>	 
        <composite:attribute name="editFormSrc"/>
        <composite:attribute name="mBean" required="true" />
        <composite:attribute name="var" default="item" />
        <!-- facet -->
        <composite:facet name="extCols" />
        
    </composite:interface>

    <composite:implementation>
    	<h:outputStylesheet library="quickJsf" name="dTPanel/datatablePanel.css" />
    	<h:outputScript library="quickJsf" name="dTPanel/datatablePanel.js" target="head"/>
    	
    	<!-- vars -->
    	<c:set var="mBean" value="#{cc.attrs.mBean}"/>	
    	<c:set var="columnClasses" value="#{fn:split(cc.attrs.columnClasses, ',|;')}"/>
    	
   		<div id="#{cc.clientId}" class="crud_datatable">
   			<p:growl id="msg_growl" widgetVar="#{cc.clientId}MsgGrowl" showDetail="true" life="5000" escape="false" redisplay="false"/>
			<h:form id="list_form">
			    <p:panel style="width:100%" header="#{cc.attrs.headerText}">
			    	<div class="data-menubar-wrapper">
			    		<p:menubar id="menubar" model="#{mBean.menuModel}">
				    		<c:if test="#{cc.attrs.filterable}">
				    			<f:facet name="options">
				    				<div class="label_menubar_options">
				    					<p:button value="添加查询条件" styleClass="menubar_option_item" icon="ui-icon-search" href="javascript:void(0);" onclick="addSearch(#{cc.clientId});"/>
				    				</div>
				    				<p:outputPanel id="data_options" styleClass="data_menubar_options" layout="block">
					    				<p:selectOneMenu id="fields_select" styleClass="fields_select_cls" value="#{mBean.viewModel.filterViewModel.fieldFilter.field}">
					    					<p:ajax update="filter_value_panel filter_cond_inplace" listener="#{mBean.updateFilterComponentOnPanel}" />
					    					<f:selectItem itemLabel="全部" itemValue="all"/>
					    					<f:selectItems id="field_select_items" value="#{mBean.columns}" var="col" itemLabel="#{col.header}" itemValue="#{col.property}"/>
					    				</p:selectOneMenu>
					    				<p:outputPanel id="filter_cond_inplace" styleClass="ui-inplace ui-hidden-container filter_cond_inplace_cls" layout="inline">
					    					<span class="ui-inplace-display" onmouseover="toggleHL(this)" onmouseout="toggleHL(this)" onclick="showInplaceContent(#{cc.clientId})">#{mBean.viewModel.filterViewModel.condLabel}</span>
					    					<span class="ui-inplace-content" style="display: none;">
							    				<p:selectOneMenu id="conds_select" styleClass="conds_select_cls" value="#{mBean.viewModel.filterViewModel.fieldFilter.condition}" onchange="hideInplaceContent(#{cc.clientId}, $(this))">
							    					 <p:ajax update="filter_value_panel" listener="#{mBean.filterableDTPanelSupport.showOtherComponentOnPanel}"/>
							    					 <f:selectItems value="#{quickJsf.condTypeMap}" />
							    				</p:selectOneMenu>	
					    					</span>
					    				</p:outputPanel>
					    				<p:outputPanel id="filter_value_panel">  
						    				<p:inputText styleClass="menubar_options_elet filter_value_cls" value="#{mBean.viewModel.filterViewModel.fieldFilter.value}" required="true" label="#{cfg['query.field']}"/>
					    				</p:outputPanel>	    				 	
				    				 	<p:inputText styleClass="hidden_op_val_cls" value="#{mBean.viewModel.filterViewModel.fieldFilter.convertValue}" />
					    				<p:commandButton id="search_btn" value="搜索" styleClass="menubar_option_item" process="-#{cc.clientId}"
					    					actionListener="#{mBean.doFilter}" update="data_table data_options -#{cc.clientId}-msg_growl" onstart="setFilterValue(#{cc.clientId});" oncomplete="showFilterLabel(xhr, status, args, #{cc.clientId});"/>
				    				</p:outputPanel>
				    			</f:facet>
			    			</c:if>
			    		</p:menubar>
		    		</div>
			    	<!-- 数据表区 -->
					<div class="data_table_wrapper">
						<q:dataTable tableStyle="width:100%" id="data_table" liveResize="true" value="#{mBean.viewModel.dataModel}" var="item" rowIndexVar="rowIndex"  rows="#{cfg['ui.rowsNum']}" emptyMessage="#{cfg['ui.emptyMessage']}"
							  paginator="true" lazy="true" rowsPerPageTemplate="#{cfg['ui.rowsPerPageTemplate']}" paginatorTemplate="#{cfg['ui.paginatorTemplate']}" widgetVar="#{cc.clientId}DataTable" resizableColumns="true"
							  currentPageReportTemplate="#{cfg['ui.currentPageReportTemplate']}" paginatorPosition="bottom" selection="#{mBean.viewModel.selectdEntity}" sortBy="#{mBean.viewModel.idFiled}" sortOrder="descending">
							<f:facet name="header">
								<c:choose>
									<c:when test="#{cc.attrs.filterable}">
										<c:if test="#{mBean.viewModel.dataModel.fieldFilters == null 
												|| fn:length(mBean.viewModel.dataModel.fieldFilters) == 0}">
											&nbsp;
										</c:if>
										<ui:repeat value="#{mBean.viewModel.dataModel.fieldFilters}" var="filterItem" varStatus="status">
											<div class="filter_item">
												<div class="filter_item_label" onclick='$(this).next().click();'>
													#{filterItem.field};
													#{filterItem.condition};
													#{filterItem.convertValue}
												</div>
												<p:commandLink styleClass="ui-button-icon-right ui-icon ui-icon-transferthick-e-w link_icon" process="-#{cc.clientId}" immediate="true"
													 actionListener="#{mBean.filterableDTPanelSupport.removeFilterBookmark}" update="-#{cc.clientId}-list_form-data_table" oncomplete="showFilterLabel(xhr, status, args, #{cc.clientId})">
													<f:param name="filterIndex" value="#{status.index}"/>
												</p:commandLink>
												<div style="clear: both;"/>	
											</div>
										</ui:repeat>
										<div style="clear: both;"/>		
									</c:when>
									<c:otherwise>
										&nbsp;
									</c:otherwise>
								</c:choose>
							</f:facet>
							<p:column resizable="false" selectionMode="single" style="width:18px" disabledSelection="#{item[mBean.viewModel.idFiled] == null}"/>
							<p:column resizable="false" headerText="序号" style="width:70px;text-align:center;">
								<h:outputText value="#{rowIndex+1}" rendered="#{item[mBean.viewModel.idFiled] != null}"/>
							</p:column>
							
							<p:columns value="#{mBean.columns}" var="column" columnIndexVar="colIndex" styleClass="#{columnClasses[colIndex]}">
							    <f:facet name="header">  
					                #{column.header}
					            </f:facet> 
					            <q:columnOutputFormat value="#{item[column.property]}" column="#{column}" 
					            		converter="#{column.converter}" optionType="#{mBean.optionTypes}">
					            </q:columnOutputFormat>
							</p:columns>
							<!-- ext columns -->
							<composite:insertChildren />
						</q:dataTable>
					</div>
				</p:panel>
			</h:form>
			<!-- dialog -->
			<c:if test="#{cc.attrs.editable}">
				<div>
					<p:dialog id="edit_dlg" styleClass="edit_dlg_cls" maximizable="true" header="#{cc.attrs.editFormSrc == null ? '错误':'编辑'}" widgetVar="#{cc.clientId}EditDlg" resizable="false" modal="true">
						<c:choose>
							<c:when test="#{cc.attrs.editFormSrc != null}">
								<p:ajax event="close" listener="#{mBean.editableDTPanelSupport.resetEntityForm}" update="-#{cc.clientId}-edit_form" process="-#{cc.clientId}"/>
								<c:choose>
									<c:when test="#{cc.attrs.useTemplate}">	
										<ui:include src="#{cc.attrs.editFormSrc}" >
											<ui:param name="editForm" value="#{mBean.viewModel.editableViewModel.entity}" />
											<ui:param name="optionTypes" value="#{mBean.optionTypes}" />
										</ui:include>
									</c:when>
									<c:otherwise>
										<h:form id="edit_form">
											<div class="form_data_wrapper">
												<h:inputHidden value="#{mBean.viewModel.editableViewModel.entity[mBean.viewModel.idFiled]}" />
												<h:panelGrid rowClasses="edit_form_grid_row" headerClass="form_grid_header" footerClass="form_grid_footer" styleClass="form_grid_panel" columns="#{cc.attrs.rowFieldCount*2}" cellpadding="5" cellspacing="0">
													<f:facet name="header">
														#{cc.attrs.formTitle}
													</f:facet>
													<ui:include src="#{cc.attrs.editFormSrc}" >
														<ui:param name="editForm" value="#{mBean.viewModel.editableViewModel.entity}" />
														<ui:param name="optionTypes" value="#{mBean.optionTypes}" />
													</ui:include>
												</h:panelGrid>
											</div>
											<div class="form_btn_wrapper">
												<p:commandButton id="save_btn" value="保存" actionListener="#{mBean.save}" icon="ui-icon-disk"
													oncomplete="addEditFormStyle(#{cc.clientId});editFormCallback(xhr, status, args, #{cc.clientId});showFilterLabel(#{cc.clientId});" process="@form -#{cc.clientId}-list_form" 
													update="@form -#{cc.clientId}-msg_growl">
												</p:commandButton>
												<p:button value="取消" href="javascript:closeEditFormDlg(#{cc.clientId});" icon="ui-icon-cancel" style="margin-left:5px;"/>
											</div>
										</h:form>
									</c:otherwise>
								</c:choose>
							</c:when>
							<c:otherwise>
								<div class="error-not-found">未找到编辑表单文件，可能是editFormSrc属性没有指定。</div>
							</c:otherwise>
						</c:choose>
					</p:dialog>
				</div>
			</c:if>
		</div>
    </composite:implementation>    
</html>